<template>
  <div class="my-tag">
    <input
      v-if="isShow"
      type="text"
      class="input"
      :value="value"
      placeholder="输入标签"
      v-focus
      @blur="isShow = false"
      @keyup.enter="changeTag"
    />
    <div v-else class="text" @dblclick="isShow = true">
      {{ value }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    changeTag(e) {
      console.log(e.target.value);
      if (e.target.value.trim() === "") {
        alert("请输入修改内容");
        return;
      }
      //让输入框隐藏
      this.isShow = false;
      //修改父组件数据
      this.$emit("input", e.target.value);
    },
  },
};
</script>
<style></style>
